<template>
	<div class="myPage" style="position: relative;">
		<div class="container"
			style="flex: 1;z-index: 2;background: #f3f3f3;flex-direction: column;height: 100%;display: flex;justify-content: start;">

			<div style="position: relative;">
				<div style="position: absolute;width: 100%;height: 100%;background-color: white;z-index: -1;">

				</div>
				<fui-nav-bar fontWeight="bold" style="" background="transparent" color="#000" title="学生管理"
					@rightClick="rightClick">
					<div
						style="border: 1px solid #eeeeee;background: white;border-radius: 32rpx;padding: 6rpx;display: flex;flex-direction: row;width: 200rpx;justify-content: space-around;">
						<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="leftClick" color="black"
							name="arrowleft"></fui-icon>
						<div class="link-column" style=""></div>
						<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="gotoHome" color="black"
							name="home"></fui-icon>
					</div>
					<template v-slot:right>

					</template>
				</fui-nav-bar>

				<div style="padding: 16rpx;display: flex;align-items: center;">
					<div style="flex: 1;display: flex;">
						<!-- 					<fui-dropdown-menu style="flex: 1;" :isCheckbox="false" selectedColor="#FF2B2B" splitLine
							:options="options" ref="ddmTag" direction="down" @click="tagItemClick" @close="tagClose">
							<view style="box-shadow: 0 0 10px rgb(89 102 122 / 10%) !important;"
								class="fui-select fui-flex__between" @tap="tagTap">
								<text style="margin-right: 16rpx;">{{tag}}</text>
								<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
									<fui-icon name="turningdown" :size="32"></fui-icon>
								</view>
							</view>
						</fui-dropdown-menu> -->
						<MyDropdownMenu @onSelect="onReqYearSelect" ref="reqYearSelect" :tittle="'年级'"
							:options="options2"></MyDropdownMenu>
						<MyDropdownMenu @onSelect="onReqClassSelect" ref="reqClassSelect" :tittle="'班级'"
							:options="classList"></MyDropdownMenu>
					</div>

					<fui-bubble-box height="64rpx" :right="100" style="margin-left: 16rpx;height: 64rpx;" :items="items"
						direction="bottom" position="absolute" :show="show" @click="itemClick" @close="onClose">
						<fui-button @click="bubble" background="#eeeeee" color="#f7f7f7" height="64rpx" width="80rpx"
							radius="96rpx" style="box-sizing: border-box;">
							<fui-icon size="42" name="menu"></fui-icon>
						</fui-button>
					</fui-bubble-box>
				</div>

				<div style="padding:8rpx 16rpx;">
					<fui-segmented-control activeColor="orange" color="black" type="text" :values="values"
						@click="onReqSexChange"></fui-segmented-control>
				</div>

			</div>

			<fui-empty style="flex: 1;display: flex;flex-direction: column;justify-content: center;"
				v-if="classList==nnull || classList.length == 0"
				src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂无新消息"></fui-empty>
			<view v-else class="space" style="overflow-y:scroll;flex: 1;padding:0rpx 16rpx;">
				<div @click="gotoStuInfo(item)"
					style="margin: 16rpx 8rpx;padding: 16rpx;background-color: white;display: flex;align-items: center;border-radius: 16rpx;"
					v-for="(item,index) in studentList">
					<image style="width: 64rpx;height: 64rpx;margin-right: 8rpx;"
						:src="item.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'"></image>
					<div>
						<div style="margin-left: 16rpx;font-size: 36rpx;font-weight: 600;">姓名：{{item.name}}</div>
						<div style="margin-left: 16rpx;font-size: 28rpx;">学号：{{item.stuNo}}</div>
					</div>
					<div style="flex: 1;"></div>
					<fui-icon size="46" name="arrowright"></fui-icon>
				</div>
			</view>

			<view class="fui-tabbar__box" style="">
				<view style="padding: 16rpx;">
					<fui-pagination @change="pageChange" style="box-sizing: border-box;" :total="total"
						:pageType="2"></fui-pagination>
				</view>
				<fui-safe-area></fui-safe-area>
			</view>


			<!-- <div style="position: absolute;width: 100%;bottom: 0rpx;">
				<div style="width: 100%;height: 80rpx;background-color: white;text-align: center;display: flex;align-items: center;justify-content: center;">ss</div>
				<fui-digital-keyboard style="display: block !important;position: relative;" :show="true"
					:background="background" :decimal="true" spareKey="取消" :theme="theme" @click="keyClick"
					@confirm="confirm" @backspace="backspace" @spare="spare"></fui-digital-keyboard>
				<fui-safe-area></fui-safe-area>
			</div> -->
		</div>
	</div>
	<fui-dialog title="添加学生" :show="showAddClass" maskClosable @click="showAddClassOnClick"
		@close="showAddClassOnClose">
		<fui-form-item label="学生名称">
			<fui-input v-if="showAddClass" :borderBottom="true" :padding="[0]" placeholder="请输入学生名称"
				v-model="addStudentName"></fui-input>
		</fui-form-item>
		<fui-form-item label="学号">
			<fui-input v-if="showAddClass" :borderBottom="true" :padding="[0]" placeholder="请输入学号"
				v-model="addStudentNo"></fui-input>
		</fui-form-item>
		<fui-form-item label="身份证号">
			<fui-input v-if="showAddClass" :borderBottom="true" :padding="[0]" placeholder="请输入身份证号"
				v-model="addStudentCardId"></fui-input>
		</fui-form-item>
		<fui-form-item style="border-radius: 16rpx;" @click="showSelectYear=true" label="年级" arrow highlight>
			<fui-input v-if="showAddClass" :borderBottom="false" :padding="[0]" placeholder="请选择年级" disabled
				v-model="addStudentYear.text" backgroundColor="transparent"></fui-input>
		</fui-form-item>
		<fui-form-item style="border-radius: 16rpx;" @click="showSelectClass=true" label="班级" arrow highlight>
			<fui-input v-if="showAddClass" :borderBottom="false" :padding="[0]" placeholder="请选择班级" disabled
				v-model="addStudentClass.text" backgroundColor="transparent"></fui-input>
		</fui-form-item>
		<fui-radio-group style="display: flex;justify-content: space-evenly;width: 100%;" name="radio"
			v-model="addStudentSex" @change="selectSexChange">
			<view style="display:flex;justify-content: space-evenly;width: 100%;">
				<fui-label>
					<view class="fui-align__center">
						<fui-radio value="1" checked></fui-radio>
						<text class="fui-text">男</text>
					</view>
				</fui-label>
				<div style="width:16rpx"></div>
				<fui-label>
					<view class="fui-align__center">
						<fui-radio value="2"></fui-radio>
						<text class="fui-text">女</text>
					</view>
				</fui-label>
			</view>
		</fui-radio-group>
	</fui-dialog>

	<fui-picker linkage title="请选择年级" :layer="1" :options="options2" :show="showSelectYear" @change="change"
		@cancel="onShowSelectYearCancel"></fui-picker>

	<fui-picker linkage title="请选择班级" :layer="1" :options="addClassList" :show="showSelectClass" @change="classChange"
		@cancel="onShowSelectYearCancel"></fui-picker>
</template>

<script>
	import request from "/request/request.js"
	export default {
		data() {
			return {
				values: [{
					id: null,
					name: '全部'
				}, {
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				showAddClass: false,
				showSelectClass: false,
				total: 0,
				current: 1,
				show: false,
				showDialog: false,
				classList: [],

				selectYear: null,
				tag: '不限',
				tagShow: false,
				options: [{
					text: '不限',
					value: null,
					src: '',
					checked: true,

				}, {
					text: '七年级',
					value: 1,
					src: '',
					checked: false
				}, {
					text: '八年级',
					value: 2,
					src: '',
					checked: false
				}, {
					text: '九年级',
					value: 3,
					src: '',
					checked: false
				}],
				options2: [{
					text: '七年级',
					value: 1,
					src: '',
					checked: false
				}, {
					text: '八年级',
					value: 2,
					src: '',
					checked: false
				}, {
					text: '九年级',
					value: 3,
					src: '',
					checked: false
				}],

				showSelectYear: false,

				addStudentName: "",
				addStudentNo: "",
				addStudentCardId: "",
				addStudentSex: 1,
				addStudentYear: {},
				addStudentClass: {},

				items: [{
					text: '添加学生',
					src: '/static/images/common/logo.png'
				}],
				show: false,
				addClassList: [],
				studentList: [],
				selectReqClass: {},
				selectReqSex: {},
			}
		},
		onLoad() {
			console.log("onLoad");
			this.getAllClass();

			setTimeout(() => {
				this.$refs.reqYearSelect.reset();
			}, 500)
		},

		methods: {
			getStudentsInfo() {
				let that = this;
				request({
					url: `/student/getStudentsInfo`,
					method: 'POST',
					data: {
						current: that.current,
						classId: this.selectReqClass.value,
						year: this.selectYear,
						sex: this.selectReqSex.id
					}
				}).then((res) => {
					console.log(res);
					that.studentList = res.data.records;
				}, (err) => {
					console.log('fail' + err);
				});
			},
			selectSexChange(e) {
				console.log(e);
			},
			leftClick() {
				uni.navigateBack();
			},
			gotoHome() {
				getApp().gotoHome();
			},
			showTest() {
				this.show = true;
			},
			onReqYearSelect(e) {
				console.log(e);
				this.selectYear = e.value;
				this.getAllClass();
				this.$refs.reqClassSelect.reset();
			},
			onReqClassSelect(e) {
				console.log(e);
				this.selectReqClass = e;
				this.getStudentsInfo();
			},
			getAllClass() {
				let that = this;
				request({
					url: `/class/getAllClass`,
					method: 'POST',
					data: {
						current: that.current,
						size: -1,
						grade: that.selectYear
					}
				}).then((res) => {
					that.classList = [];
					if (res.data.records.length == 0) {
						that.classList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.records.length; i++) {
						let obj = {
							text: res.data.records[i].className,
							value: res.data.records[i].id,
						}
						that.classList.push(obj);
					}
					console.log(res);
				}, (err) => {
					console.log('fail' + err);
				});
			},
			tagTap() {
				this.$refs.ddmTag.show()
				this.tagShow = true;
			},
			tagItemClick(e) {
				console.log(e)
				this.tag = e.text;
				this.selectYear = e.value;
				this.tagClose();
				this.getAllClass();
			},
			tagClose() {
				this.tagShow = false;
			},
			//显示气泡框
			bubble() {
				this.show = true
			},
			//气泡框item点击事件
			itemClick(e) {
				console.log(e)
				if (e.index == 0) {
					this.showAddClass = true;
				}
				this.onClose()
			},
			//隐藏气泡框
			onClose() {
				this.show = false
			},
			showAddClassOnClose(e) {
				console.log(e);
				this.showAddClass = false;
			},
			showAddClassOnClick(e) {
				console.log(e);
				if (e.index == 0) {
					this.showAddClass = false;
				}
				if (e.index == 1) {
					this.addStudent();
					this.showAddClass = false;
				}
			},
			addStudent() {
				let that = this;
				request({
					url: `/student/saveOrUpdateStu`,
					method: 'POST',
					data: {
						stuNo: this.addStudentNo,
						name: this.addStudentName,
						sex: this.addStudentSex,
						cardId: this.addStudentCardId,
						year: this.addStudentYear.value,
						classId: this.addStudentClass.value,
					}
				}).then((res) => {
					console.log(res);
					that.getStudentsInfo();
				}, (err) => {
					console.log('fail' + err);
					that.getStudentsInfo();
				});
			},
			onShowSelectYearCancel(e) {
				this.showSelectYear = false
				this.showSelectClass = false;
			},
			change(e) {
				let that = this;
				this.showSelectYear = false;
				this.addStudentClass = {};

				this.addStudentYear = e;
				console.log(e);
				request({
					url: `/class/getAllClass`,
					method: 'POST',
					data: {
						grade: this.addStudentYear.value
					}
				}).then((res) => {
					that.addClassList = [];
					if (res.data.records.length == 0) {
						that.addClassList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.records.length; i++) {
						let obj = {
							text: res.data.records[i].className,
							value: res.data.records[i].id,
						}
						that.addClassList.push(obj);
					}
					console.log(res);
				}, (err) => {
					console.log('fail' + err);
				});
			},
			classChange(e) {
				this.showSelectClass = false;
				this.addStudentClass = e;
				console.log(e);
			},

			pageChange(e) {
				console.log(e);
				this.current = e.current;
				this.getAllClass();
			},
			onReqSexChange(e) {
				console.log(e);
				this.selectReqSex = e;
				this.getStudentsInfo();
			},
			gotoStuInfo(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/studentInfo/studentInfo?stuId=' + item.id
				})
			}
		}
	}
</script>

<style scoped>
	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}

	.fui-list__cell {
		width: 100%;
	}

	.fui-select {
		flex: 1;
		height: 80rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.fui-select::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 200%;
		height: 200%;

		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none;
	}

	.fui-flex__center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fui-flex__between {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>